<template>
	<section class="condition">
		<div class="f-between" style="padding: 15px 0">
			<p class="line-label">{{ title }}</p>
			<div class="flex align-center gap-20" v-if="showSearch">
				<DateBetween v-model="searchKey" valueFormat="YYYY-MM-DD HH:mm:ss" placeholder="日期" @change="getInitData"></DateBetween>
			</div>
		</div>
		<div class="condition-box">
			<AplidCharts :type="chartType" :option="configStr[config]()" style="height: 100%" ref="chartEl"></AplidCharts>
		</div>
	</section>
</template>

<script setup lang="ts">
import apiMod from '@/apiMod/index'
import DateBetween from '@/views/aplid/DateBetween/index.vue'
import { optionChart1Config, optionChart2Config, optionChart3Config } from '../config'

const props = defineProps<{
	title?: string
	config?: string
	api?: string
	chartType?: string
	paramsObj?: any
  showSearch?:boolean
}>()

const searchKey = ref('')

const configStr = {
	optionChart1Config,
	optionChart2Config,
	optionChart3Config,
}

const activeName = ref('1')
const chartEl = ref(null)

const getInitData = () => {
	chartEl.value.myChart?.showLoading({
		text: 'loading',
		color: '#c23531',
		textColor: '#000',
		maskColor: 'rgba(255, 255, 255, 0.2)',
		zlevel: 0,
	})

	apiMod[props.api]({
		...props.paramsObj,
		createTimeBetween: searchKey.value,
	}).then((res) => {
		chartEl.value.myChart?.hideLoading()
		if (!res.data) return
		let option = {}
		let data = []
		switch (props.api) {
			case 'view_esSpotOrder_returnVisit':
				data = [
					{ label: '享受服务', value: res.data.enjoyServiceFlag },
					{ label: '留有联系方式', value: res.data.leaveStaffPhoneFlag },
					{ label: '有服务人员上门', value: res.data.staffNeatlyFlag },
					{ label: '知晓政策文件', value: res.data.knowPolicyFlag },
					{ label: '知晓服务组织名称', value: res.data.knowOrgNameFlag },
				]
				option = optionChart1Config(data, res.data.count)
				break
			case 'view_esSpotOrder_week':
				data = res.data?.map((item) => {
					return {
						label: item.date,
						value: item.automatic,
						value2: item.artificial,
					}
				})
				option = optionChart2Config(data)
				break
			case 'view_esSpotOrder_visitResultStatistics':
				data = res.data?.map((item) => {
					return {
						label: item.districtName,
						value: item.satisfactionCount,
						value2: item.dissatisfiedCount,
					}
				})
				option = optionChart3Config(data)
				break
			case 'view_esSpotOrder_orgVisitResult':
				data = res.data?.map((item) => {
					return {
						label: item.districtName || item.organizationName,
						value: item.satisfactionCount,
						value2: item.dissatisfiedCount,
					}
				})

				option = optionChart3Config(data)
				break
			default:
				break
		}
		chartEl.value?.setOptions(option)
	})
}

onMounted(() => {
	getInitData()
})
</script>

<style scoped lang="scss">
.condition {
	flex: 1;
}
.line-label {
	font-family: 'Microsoft YaHei Bold';
	font-weight: 700;
	font-size: 16px;
	text-align: left;
	color: #1c1c28;
	margin-left: 25px;
}
</style>
